<template>
  <form-item-wrapper
    :designer="designer"
    :field="field"
    :rules="rules"
    :design-state="designState"
    :parent-widget="parentWidget"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :sub-form-row-id="subFormRowId"
  >
    <!-- dengshunbo 2025-3-13 -->
     <!--  :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')" -->
    <div v-if="!getReadMode() || field.isShow">
        <div v-if="field.name=='所属门禁组' || field.options.name=='yaoqingmenjinzu'">
          <el-select
              v-show="!getReadMode() || field.isShow"
              ref="fieldEditor"
              v-model="fieldModel"
              class="full-width-input"
              :multiple="true"
              :disabled="field.options.disabled"
              :size="field.options.size"
              :clearable="field.options.clearable"
              :filterable="field.options.filterable"
              :allow-create="field.options.allowCreate"
              :default-first-option="allowDefaultFirstOption"
              :automatic-dropdown="field.options.automaticDropdown"
            
              :multiple-limit="field.options.multipleLimit"
              :placeholder="field.options.placeholder || '请输入' + field.options.label"
              :remote="field.options.remote"
              :remote-method="remoteMethod"
              @focus="handleFocusCustomEvent"
              @blur="handleBlurCustomEvent"
              @change="handleChangeEvent($event, fieldModel)"
            >
              <el-option
                  v-for="item in menjinData"
                  :key="item.id"
                  :label="item.menjinzumingcheng"
                  :value="item.menjinzuSN+''"
                  :disabled="item.disabled"
                >
            </el-option>
          </el-select> 
        </div>
        <div v-else-if="field.name == '授权门禁组'">
          <el-select
              v-show="!getReadMode() || field.isShow"
              ref="fieldEditor"
              v-model="fieldModel"
              class="full-width-input"
              :multiple="true"
              :disabled="field.options.disabled"
              :size="field.options.size"
              :clearable="field.options.clearable"
              :filterable="field.options.filterable"
              :allow-create="field.options.allowCreate"
              :default-first-option="allowDefaultFirstOption"
              :automatic-dropdown="field.options.automaticDropdown"
            
              :multiple-limit="field.options.multipleLimit"
              :placeholder="field.options.placeholder || '请输入' + field.options.label"
              :remote="field.options.remote"
              :remote-method="remoteMethod"
              @focus="handleFocusCustomEvent"
              @blur="handleBlurCustomEvent"
              @change="handleChangeEvent($event, fieldModel)"
            >
              <el-option
                  v-for="item in menjinData"
                  :key="item.id"
                  :label="item.menjinzumingcheng"
                  :value="item.id+''"
                  :disabled="item.disabled"
                >
              </el-option>
             
          </el-select> 
        </div>
        <div v-else>
            <div v-if="field.name=='邀请人姓名'">
              <el-input
                v-show="!getReadMode() || field.isShow"
                ref="fieldEditor"
                v-model="fieldModel"
                :disabled="true"
                :readonly="field.options.readonly"
                :size="field.options.size"
                type="text"
                :show-password="field.options.showPassword"
                :placeholder="field.options.placeholder || '请输入' + field.options.label"
                :clearable="field.options.clearable"
                :minlength="field.options.minLength"
                :maxlength="field.options.maxLength"
                :show-word-limit="field.options.showWordLimit"
                :prefix-icon="field.options.prefixIcon"
                :suffix-icon="field.options.suffixIcon"
              >
              </el-input>
            </div>
            <div v-else>
              <el-input
                v-show="!getReadMode() || field.isShow"
                ref="fieldEditor"
                v-model="fieldModel"
                :disabled="field.options.disabled"
                :readonly="field.options.readonly"
                :size="field.options.size"
                type="text"
                :show-password="field.options.showPassword"
                :placeholder="field.options.placeholder || '请输入' + field.options.label"
                :clearable="field.options.clearable"
                :minlength="field.options.minLength"
                :maxlength="field.options.maxLength"
                :show-word-limit="field.options.showWordLimit"
                :prefix-icon="field.options.prefixIcon"
                :suffix-icon="field.options.suffixIcon"
                @focus="handleFocusCustomEvent"
                @blur="handleBlurCustomEvent"
                @input="handleInputCustomEvent"
                @change="handleChangeEvent"
              >
                <el-button
                  slot="append"
                  v-if="field.options.appendButton"
                  :disabled="field.options.disabled || field.options.appendButtonDisabled"
                  :class="field.options.buttonIcon"
                  @click.native="emitAppendButtonClick"
                ></el-button>
              </el-input>
            </div>
       </div>
    </div>
    <template v-if="getReadMode() && !field.isShow">
      <!-- field.options.name=='access_control_team' || -->
        <div v-if="field.name=='授权门禁组'"  class="readonly-mode-field" @click="isShowFn()">
           {{ getFilterVal(contentForReadMode, 1) }}
        </div>
        <div v-else-if="field.options.name=='yaoqingmenjinzu'">
          {{ getFilterVal(contentForReadMode, 2) }}
        </div>
        <div v-else-if="field.name=='所属门禁组'">
          {{ getFilterValid(contentForReadMode) }}
        </div>
        <div v-else class="readonly-mode-field" >
           <span v-if="getFilterImage(contentForReadMode)=='image'">
            <img :src="contentForReadMode" alt="" class="img"/>
           </span>
           <span v-else @click="isShowFn()">
              {{ contentForReadMode || '--' }}
           </span>
        </div>
    </template>
  </form-item-wrapper>
</template>

<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from '@/utils/emitter'
import i18n, { translate } from '@/utils/i18n'
import fieldMixin from '@/components/form-designer/form-widget/field-widget/fieldMixin'
import { menjinListCardApi, getUserPrimessApi } from '@/api/enterprise'
export default {
  name: 'input-widget',
  componentName: 'FieldWidget', //必须固定为FieldWidget，用于接收父级组件的broadcast事件
  mixins: [emitter, fieldMixin, i18n],
  props: {
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false
    },

    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: ''
    }
  },
  components: {
    FormItemWrapper
  },
  inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
  data() {
    return {
      oldFieldValue: null, //field组件change之前的值
      fieldModel: null,
      fieldModel1: null,
      rules: [],
      menjinData: [],
      menjimodel: [],
      allmenjinList:[],
    }
  },
  watch: {},
  computed: {
    inputType() {
      if (this.field.options.type === 'number') {
        return 'text' //当input的type设置为number时，如果输入非数字字符，则v-model拿到的值为空字符串，无法实现输入校验！故屏蔽之！！
      }

      return this.field.options.type || 'text'
    },
    contentForReadMode() {
      return this.fieldModel ? this.fieldModel : '--'
    },
    allowDefaultFirstOption() {
      return !!this.field.options.filterable && !!this.field.options.allowCreate
    },
    remoteMethod() {
      if (!!this.field.options.remote && !!this.field.options.onRemoteQuery) {
        return this.remoteQuery
      } else {
        return undefined
      }
    },
  },
  beforeCreate() {
    /* 这里不能访问方法和属性！！ */
  },

  created() {
    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
         需要在父组件created中初始化！！ */
    this.initFieldModel()
    this.registerToRefList()
    this.initEventHandler()
    this.buildFieldRules()
    this.handleOnCreated()

  
  },

  mounted() {
    // dengshunbo 2025-1-20
    if(this.field.name=="授权门禁组" || this.field.name=="所属门禁组" || this.field.options.name=='yaoqingmenjinzu'){
       this.handlermengjizu();
    }
    // end
    this.handleOnMounted()
  },

  beforeDestroy() {
    this.unregisterFromRefList()
  },

  methods: {
    // 门禁组 - dengshunbo 2025-1-20
    handlermengjizu() {
      let dataform = {page:1, limit: 100,scope_frame:'all', show_search_type:'0', is_system:1, view_search_boolean:'', view_search:[],order_by:[]}
      menjinListCardApi(dataform)
        .then((res) => {
           if(res.status==200){
              let fkuserid = this.$store.state.user.fkuserid;
              this.allmenjinList = res.data.list;
              if(fkuserid){
                let menjinList = res.data.list;            
                this.getUserPrimess(fkuserid, menjinList);
              }else{
                let menjinList = res.data.list;      
                let userinfoobj = window.localStorage.getItem('userInfo');
                let userinfo = JSON.parse(userinfoobj);
                this.getUserPrimess(userinfo.id, menjinList);
              }
           }
        })
        .catch((err) => {})
        .finally(() => {
      })
    },
    // 获取用户信息数据
    getUserPrimess(id, menjinList) {
      getUserPrimessApi(id)
        .then((res) => {
           if(res.status==200){
              let resdata = res.data;
              let userinfos = resdata.module_info;
              if(userinfos.yaoqingmenjinzu){
                  let yqmjarr = userinfos.yaoqingmenjinzu.split(",");
                  let yqmjarrnum = yqmjarr.map(Number);
                  let mjData = []
                  for(let i=0;i<menjinList.length;i++){
                     if(yqmjarrnum.includes(menjinList[i].id)){
                       mjData.push(menjinList[i]);
                     }
                  }
                this.menjinData = mjData;
              }else{
                this.menjinData = [];
              }
           }
        })
        .catch((err) => {})
    },
    getFilterVal(mjarr, index=1){
       if(mjarr && mjarr.length > 0){
          let selectarr = []
          if(Array.isArray(mjarr)){
            selectarr = mjarr.map(Number)
          }else{
            selectarr = mjarr.split(',').map(Number)
          }
          let mjreturnarr = []
          let MJData = []
          if(index==1){
            MJData = this.menjinData
          }else{
            MJData = this.allmenjinList
          }
          for(let i=0;i< MJData.length;i++){
             if(selectarr.includes(MJData[i].id)){ // menjinzuSN
                mjreturnarr.push(MJData[i].menjinzumingcheng)
             }
          }
          return mjreturnarr.join(",")
       }else{
          return '--'
       }
    },
    // 获取过滤后的有效数据
    getFilterValid(mjarr){
      if(mjarr && mjarr.length > 0){
          let selectarr = []
          if(Array.isArray(mjarr)){
            selectarr = (mjarr).map(Number)
          }else{
            selectarr = (mjarr.split(',')).map(Number)
          }
          let mjreturnarr = []
          for(let i=0;i< this.allmenjinList.length;i++){
             if(selectarr.includes(this.allmenjinList[i].id)){ // 比较id
                mjreturnarr.push(this.allmenjinList[i].menjinzumingcheng)
             }
          }
          return mjreturnarr.join(",")
       }else{
          return '--'
       }
    },
    //
    getFilterImage(val){
      if(val){
         if(this.isImagePath(val)){
            return 'image';
         }else{
            return val;
         }
      }else{
         return '--';
      }

    },
    // 判断字符串是否是图片路径
    isImagePath(path) {
       return /\.(jpg|jpeg|png|gif|webp)$/i.test(path);
    },
     // end
  }
}
</script>

<style lang="scss" scoped>

@import '../../../../styles/global.scss'; //* form-item-wrapper已引入，还需要重复引入吗？ *//
.img{
  width: auto;
  height: 60px;
}

</style>
@/utils/i18ns
